<template>
  <section class='f-real-name'>
    <van-cell title="实名状态" :value="shopForm.certificationStatus">
      <template #value>
        <p :style="{'color': shopForm.certificationStatus == 0? '#FC8683': '##3273F4'}">
          {{shopForm.certificationStatus == 0? '未实名': '已实名'}}
        </p>
      </template>
    </van-cell>

    <van-cell class="f-mt-15" title="联系人姓名" :value="shopForm.contactsName" />
    <van-cell title="联系人电话" :value="shopForm.contactsPhone" />
    <van-cell title="联系人证件号码" :value="shopForm.certificateNumber" />

    <div class="f-tips">
      <p>温馨提示：</p>
      <p>1.手机上已安装支付宝App；</p>
      <p>2.支付宝账号的实名信息务必与上方联系人姓名、证件号一致，否则将影响您的实名认证结果。</p>
    </div>

    <div class="f-submit-btn" v-if="shopForm.certificationStatus == 0">
      <van-button round block type="primary" @click="alipayAuth">支付宝实名认证</van-button>
    </div>
  </section>
</template>
<script>
import { ref, reactive, toRefs, onMounted, watch } from 'vue';
import { useRouter, useRoute } from 'vue-router'
import { useStore } from 'vuex';
import api from '../api'
import JsBridge from '@/utils/JsBridge.js'
import { getStore, successDeal, getUrlParam } from '@/utils/utils';

export default {
  setup(props, context) {
    const store = useStore()

    const router = useRouter()
    const route = useRoute();

    const state = reactive({
      shopForm: {}
    })

    onMounted(() => {
      store.commit("setNavBar", {
        title: '实名认证',
        show: true,
        left: true,
        leftType: 'back',
        right: false,
        rightType: 'search',
      });

      getShopInfo()
    })

    const getShopInfo = () => {
      api.shopInfo().then(res => {
        state.shopForm = res.data
      })
    }

    // 支付宝实名认证
    const alipayAuth = () => {
      let json = {
        "idcardName": state.shopForm.contactsName,
        "idcardNum": state.shopForm.certificateNumber,
        shopId: getStore('USER_INFO').companyId,
        "source": 1
      }
      api.signApp(json).then(res1 => {
        let isiOS = !!navigator.userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);

        JsBridge.callHandler('alipayAuth', res1.data.infoStr, (res2) => {
          if (res2) {
            let data = JSON.parse(res2)
            successDeal(data.msg)
            let url = isiOS ? data.result : data.result.result
            let params = {
              "appId": getUrlParam('app_id', url),
              "authCode": getUrlParam('auth_code', url),
              "certVerifyId": res1.data.verifyId,
              "scope": getUrlParam('scope', url),
              "source": "111"
            }
            api.signNotify(params).then(response => {
              successDeal('支付宝实名认证成功！')
              getShopInfo()
            })
          }
        })
      })
    }

    return {
      ...toRefs(state),
      alipayAuth
    }
  }
}
</script>
<style lang='scss' scoped>
.f-real-name {
  .f-tips {
    font-size: 10px;
    color: #ff2b2b;
    margin: 11px 15px;
  }
  .f-submit-btn {
    margin-top: 70px;
    padding: 0 62px;
  }
}
</style>